import { createSignal, JSXElement } from "solid-js";
import { VirtualList } from "../src";
export const ListItem = (props: any) : JSXElement => {
    const style = {...props.style}
    return <div
      style={style}
      role="listitem"
      classList={{
        "ListItemOdd": props.index % 2 === 0,
        "ListItemEven": props.index % 2 === 1,
      }}
      ref={props.ref}
    >
      <div> {new Array(props.item).fill(true).map(() => 'Row').join(" ")} Row {props.index}</div>
    </div>
}

export const createArray = (count: number) => {
    return new Array(count).fill(true).map(() => 1 + Math.round(Math.random() * 20))
};

export default function Page () {
    const [data, setData] = createSignal(createArray(100));
    const [size, setSize] = createSignal(250)
    const [height, setHeight] = createSignal(250)
    return <div>
        <div style={{width: size() + 'px', border: '1px solid #ccc'}}>
            <VirtualList height={height()} items={data()} itemEstimatedSize={20}>
                {ListItem}
            </VirtualList>
        </div>
        <div style={{width: '250px', border: '1px solid #ccc'}}>
            <VirtualList maxHeight={250} items={data()} itemEstimatedSize={20}>
                {ListItem}
            </VirtualList>
        </div>
        <button onClick={() => {
            setData(createArray(Math.round(Math.random() * 100) + 1));
        }}>修改数据</button>

        <button onClick={() => {
            setData(createArray(2));
        }}>少量数据</button>

        <input type="range" min={250} max={500} onChange={(v) => {
            setSize(parseInt(v.target.value));
        }}/>
        <input type="range" min={250} max={500} onChange={(v) => {
            setHeight(parseInt(v.target.value));
        }}/>
    </div>
}